<template>
  <div class="login-container">
    <!-- 头部Logo -->
    <div class="logo-container">
      <img class="logo" src="@/assets/images/projects/logo.png" alt="Logo">
    </div>

    <!-- 登录/注册标题 -->
    <div class="title">巴林右旗重点项目监管平台</div>

    <!-- 表单区域 -->
    <div class="form-container">
      <!-- 账号输入框 -->
      <div class="input-item">
        <input type="text" v-model="formData.account" placeholder="账号" class="input-field">
      </div>

      <!-- 密码输入框 -->
      <div class="input-item">
        <input type="password" v-model="formData.password" placeholder="密码" class="input-field">
      </div>
      
      <!-- 验证码输入框 -->
      <div class="input-item">
        <input type="text" v-model="formData.verificationCode" placeholder="验证码" class="input-field">
      </div>
      
      <!-- 验证码图片 -->
      <div class="image-view" @click="getVerificationCode">
        <img v-if="verificationImage" class="verif-image" :src="verificationImage" alt="验证码">
        <div v-else class="verif-image-placeholder">
          点击刷新验证码 (API暂不可用)
        </div>
      </div>

      <!-- 登录按钮 -->
      <button class="login-btn" @click="handleLogin">登录</button>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import config from '@/config.js'
import axios from 'axios'

export default {
  setup() {
    const router = useRouter()
    
    const formData = ref({
      account: '',
      password: '',
      verificationCode: '',
      timesTamp: new Date().getTime()
    })
    
    const verificationImage = ref(null)
    
    onMounted(() => {
      console.log("时间戳1", formData.value.timesTamp)
      getVerificationCode()
    })

    const handleLogin = () => {
      console.log("时间戳2：", formData.value.verificationCode)
      
      // 验证表单
      if (!formData.value.account) {
        alert('请输入账号')
        return
      }
      if (!formData.value.password) {
        alert('请输入密码')
        return
      }
      if (!formData.value.verificationCode) {
        alert('请输入验证码')
        return
      }
      
      // 登录逻辑处理
      axios.post(config.getUrl('login'), {
        captcha: formData.value.verificationCode,
        checkKey: formData.value.timesTamp,
        password: formData.value.password,
        username: formData.value.account,
      })
      .then(response => {
        console.log(response.data)
        if (response.data.code == 200) {
          console.log("登录成功了")
          
          router.push('/project-list')
          alert('登录成功')
        } else {
          alert('登录失败：' + (response.data.message || '未知错误'))
        }
      })
      .catch(error => {
        console.error('登录失败：', error)
        
        // 在开发环境中，提供一个模拟的登录功能
        if (confirm('API暂不可用，是否模拟登录成功？')) {
          console.log("模拟登录成功")
          router.push('/project-list')
        } else {
          alert('登录失败，请检查账号密码和验证码')
        }
      })
      
      console.log('登录信息：', formData.value)
    }
    
    const getVerificationCode = () => {
      axios.get(config.getUrl('verificationCode') + formData.value.timesTamp)
        .then(response => {
          console.log("验证码时间戳", formData.value.timesTamp)
          verificationImage.value = response.data.result
          console.log("返回信息", response.data.result)
        })
        .catch(error => {
          console.error('获取验证码失败：', error)
          // 在开发环境中，提供一个模拟的验证码功能
          alert('验证码API暂不可用，请使用任意验证码进行测试')
        })
    }

    return {
      formData,
      verificationImage,
      handleLogin,
      getVerificationCode
    }
  }
}
</script>

<style scoped lang="scss">
.login-container {
  min-height: 100vh;
  background: linear-gradient(180deg, #1890FF 0%, #FFFFFF 50%);
  padding: 0 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .logo-container {
    padding: 30px 0;
    display: flex;
    justify-content: center;

    .logo {
      width: 120px;
      height: 120px;
      border-radius: 50%;
    }
  }

  .title {
    font-size: 36px;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
    margin-bottom: 60px;
  }

  .form-container {
    background: #FFFFFF;
    border-radius: 10px;
    padding: 30px;
    width: 400px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

    .input-item {
      background: #F8F8F8;
      border-radius: 5px;
      margin-bottom: 20px;

      .input-field {
        width: 100%;
        height: 50px;
        padding: 0 20px;
        border: none;
        background: transparent;
        outline: none;
        
        &::placeholder {
          color: #999999;
        }
      }
    }

    .image-view {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 20px;
      cursor: pointer;

      .verif-image, .verif-image-placeholder {
        width: 100%;
        height: 50px;
        border-radius: 5px;
      }
      
      .verif-image-placeholder {
        background-color: #f0f0f0;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #999;
        font-size: 14px;
      }
    }

    .login-btn {
      background: #1890FF;
      color: #FFFFFF;
      height: 50px;
      line-height: 50px;
      border-radius: 5px;
      width: 100%;
      font-size: 16px;
      font-weight: 500;
      margin: 20px 0;
      cursor: pointer;
      transition: background 0.3s;
      
      &:hover {
        background: #40A9FF;
      }
    }
  }
}

@media (max-width: 768px) {
  .login-container {
    .form-container {
      width: 90%;
      max-width: 400px;
    }
  }
}
</style>
